
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-o-down"></use>
                    </svg>
                    <div class="name">下箭头-圆形</div>
                    <div class="fontclass">#icon-arrow-circle-o-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-o-top"></use>
                    </svg>
                    <div class="name">上箭头-圆形</div>
                    <div class="fontclass">#icon-arrow-circle-o-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-o-right"></use>
                    </svg>
                    <div class="name">右箭头-圆形</div>
                    <div class="fontclass">#icon-arrow-circle-o-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-o-left"></use>
                    </svg>
                    <div class="name">左箭头-圆形</div>
                    <div class="fontclass">#icon-arrow-circle-o-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-circle-left"></use>
                    </svg>
                    <div class="name">箭头-左</div>
                    <div class="fontclass">#icon-chevron-circle-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-circle-down"></use>
                    </svg>
                    <div class="name">箭头-下</div>
                    <div class="fontclass">#icon-chevron-circle-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-circle-top"></use>
                    </svg>
                    <div class="name">箭头-上</div>
                    <div class="fontclass">#icon-chevron-circle-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-circle-right"></use>
                    </svg>
                    <div class="name">箭头-右</div>
                    <div class="fontclass">#icon-chevron-circle-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-down"></use>
                    </svg>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">#icon-chevron-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">#icon-chevron-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-left"></use>
                    </svg>
                    <div class="name">箭头-向左</div>
                    <div class="fontclass">#icon-chevron-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-top"></use>
                    </svg>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">#icon-chevron-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caret-up"></use>
                    </svg>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">#icon-caret-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caret-left"></use>
                    </svg>
                    <div class="name">箭头-向左</div>
                    <div class="fontclass">#icon-caret-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caret-down"></use>
                    </svg>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">#icon-caret-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caret-top"></use>
                    </svg>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">#icon-caret-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort-top"></use>
                    </svg>
                    <div class="name">排序-向上</div>
                    <div class="fontclass">#icon-sort-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort-down"></use>
                    </svg>
                    <div class="name">排序-向下</div>
                    <div class="fontclass">#icon-sort-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort"></use>
                    </svg>
                    <div class="name">排序-默认</div>
                    <div class="fontclass">#icon-sort</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-long-arrow-top"></use>
                    </svg>
                    <div class="name">向上</div>
                    <div class="fontclass">#icon-long-arrow-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-long-arrow-down"></use>
                    </svg>
                    <div class="name">向上</div>
                    <div class="fontclass">#icon-long-arrow-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-long-arw-down"></use>
                    </svg>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">#icon-long-arw-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-long-arw-top"></use>
                    </svg>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">#icon-long-arw-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lg-arw-down"></use>
                    </svg>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">#icon-lg-arw-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lg-arw-top"></use>
                    </svg>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">#icon-lg-arw-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-right"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-circle-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-down"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-circle-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-top"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-circle-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-circle-left"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-circle-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-right"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-left"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow-top"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrow-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-change-right"></use>
                    </svg>
                    <div class="name">交换-右</div>
                    <div class="fontclass">#icon-change-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-change-left"></use>
                    </svg>
                    <div class="name">交换-向左</div>
                    <div class="fontclass">#icon-change-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-change-left-right"></use>
                    </svg>
                    <div class="name">交换-相互</div>
                    <div class="fontclass">#icon-change-left-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-last-page"></use>
                    </svg>
                    <div class="name">翻页-末页</div>
                    <div class="fontclass">#icon-last-page</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-first-page"></use>
                    </svg>
                    <div class="name">翻页-首页</div>
                    <div class="fontclass">#icon-first-page</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-page-last"></use>
                    </svg>
                    <div class="name">翻页-末页</div>
                    <div class="fontclass">#icon-page-last</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-page-first"></use>
                    </svg>
                    <div class="name">翻页-首页</div>
                    <div class="fontclass">#icon-page-first</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-p-last"></use>
                    </svg>
                    <div class="name">翻页-末页</div>
                    <div class="fontclass">#icon-p-last</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-p-first"></use>
                    </svg>
                    <div class="name">翻页-首页</div>
                    <div class="fontclass">#icon-p-first</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao"></use>
                    </svg>
                    <div class="name">支付宝</div>
                    <div class="fontclass">#icon-zhifubao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">#icon-pengyouquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao1"></use>
                    </svg>
                    <div class="name">支付宝</div>
                    <div class="fontclass">#icon-zhifubao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sina"></use>
                    </svg>
                    <div class="name">新浪</div>
                    <div class="fontclass">#icon-sina</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mac"></use>
                    </svg>
                    <div class="name">mac</div>
                    <div class="fontclass">#icon-mac</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-windows"></use>
                    </svg>
                    <div class="name">windows</div>
                    <div class="fontclass">#icon-windows</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-android"></use>
                    </svg>
                    <div class="name">android</div>
                    <div class="fontclass">#icon-android</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin1"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin2"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao2"></use>
                    </svg>
                    <div class="name">支付宝</div>
                    <div class="fontclass">#icon-zhifubao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radio-on"></use>
                    </svg>
                    <div class="name">单选-选中</div>
                    <div class="fontclass">#icon-radio-on</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radio"></use>
                    </svg>
                    <div class="name">单选</div>
                    <div class="fontclass">#icon-radio</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-radio-fill"></use>
                    </svg>
                    <div class="name">单选-fill</div>
                    <div class="fontclass">#icon-radio-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox"></use>
                    </svg>
                    <div class="name">checkbox</div>
                    <div class="fontclass">#icon-checkbox</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-on"></use>
                    </svg>
                    <div class="name">checkbox</div>
                    <div class="fontclass">#icon-checkbox-on</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-on-fill"></use>
                    </svg>
                    <div class="name">checkbox-fill</div>
                    <div class="fontclass">#icon-checkbox-on-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox1"></use>
                    </svg>
                    <div class="name">checkbox</div>
                    <div class="fontclass">#icon-checkbox1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-checkbox-on1"></use>
                    </svg>
                    <div class="name">checkbox-选中</div>
                    <div class="fontclass">#icon-checkbox-on1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-jia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jian"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-jian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus-fill"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-plus-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-fill"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-minus-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus-square"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-plus-square</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-minus-square"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-minus-square</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia-square"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-jia-square</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jian-square"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-jian-square</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia-fangkuang"></use>
                    </svg>
                    <div class="name">加-方框</div>
                    <div class="fontclass">#icon-jia-fangkuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jian-fangkuang"></use>
                    </svg>
                    <div class="name">减-方框</div>
                    <div class="fontclass">#icon-jian-fangkuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">错误、关闭、取消</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-fill"></use>
                    </svg>
                    <div class="name">错误、关闭、取消-圆框</div>
                    <div class="fontclass">#icon-close-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-circle"></use>
                    </svg>
                    <div class="name">错误、关闭、取消-线性圆框</div>
                    <div class="fontclass">#icon-close-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-square"></use>
                    </svg>
                    <div class="name">错误、关闭、取消-线性方框</div>
                    <div class="fontclass">#icon-close-square</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close-square1"></use>
                    </svg>
                    <div class="name">错误、关闭、取消-方框</div>
                    <div class="fontclass">#icon-close-square1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-success"></use>
                    </svg>
                    <div class="name">正确、完成</div>
                    <div class="fontclass">#icon-success</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scuuess-circle"></use>
                    </svg>
                    <div class="name">正确、完成-线性圆框</div>
                    <div class="fontclass">#icon-scuuess-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-success-fill"></use>
                    </svg>
                    <div class="name">正确、完成-圆框</div>
                    <div class="fontclass">#icon-success-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info-circle"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#icon-info-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info-fill"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#icon-info-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-doubt-circle"></use>
                    </svg>
                    <div class="name">问号</div>
                    <div class="fontclass">#icon-doubt-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-doubt-fill"></use>
                    </svg>
                    <div class="name">问号</div>
                    <div class="fontclass">#icon-doubt-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plaint-circle"></use>
                    </svg>
                    <div class="name">感叹号-线性圆框</div>
                    <div class="fontclass">#icon-plaint-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plaint-fill"></use>
                    </svg>
                    <div class="name">感叹号-圆框</div>
                    <div class="fontclass">#icon-plaint-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plaint-new"></use>
                    </svg>
                    <div class="name">感叹号</div>
                    <div class="fontclass">#icon-plaint-new</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plaint-new-fill"></use>
                    </svg>
                    <div class="name">感叹号</div>
                    <div class="fontclass">#icon-plaint-new-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home-fill"></use>
                    </svg>
                    <div class="name">首页-选中</div>
                    <div class="fontclass">#icon-home-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-index"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-index</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-index-fill"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-index-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-my"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-my</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-my-fill"></use>
                    </svg>
                    <div class="name">我的-选中</div>
                    <div class="fontclass">#icon-my-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mine"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-mine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mine-fill"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-mine-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-fill"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-user-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search-fill"></use>
                    </svg>
                    <div class="name">search</div>
                    <div class="fontclass">#icon-search-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart-fill"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-cart-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart"></use>
                    </svg>
                    <div class="name">采购-线性</div>
                    <div class="fontclass">#icon-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-set"></use>
                    </svg>
                    <div class="name">设置-线性</div>
                    <div class="fontclass">#icon-set</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-set-fill"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-set-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msg"></use>
                    </svg>
                    <div class="name">消息-线性</div>
                    <div class="fontclass">#icon-msg</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msg-fill"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-msg-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mail"></use>
                    </svg>
                    <div class="name">mail</div>
                    <div class="fontclass">#icon-mail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mail-fill"></use>
                    </svg>
                    <div class="name">mail</div>
                    <div class="fontclass">#icon-mail-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">message</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message-fill"></use>
                    </svg>
                    <div class="name">message</div>
                    <div class="fontclass">#icon-message-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shop-fill"></use>
                    </svg>
                    <div class="name">店铺-fill</div>
                    <div class="fontclass">#icon-shop-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shop"></use>
                    </svg>
                    <div class="name">店铺</div>
                    <div class="fontclass">#icon-shop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-out"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#icon-out</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-synchro"></use>
                    </svg>
                    <div class="name">同步</div>
                    <div class="fontclass">#icon-synchro</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gotop"></use>
                    </svg>
                    <div class="name">回顶部</div>
                    <div class="fontclass">#icon-gotop</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filter"></use>
                    </svg>
                    <div class="name">筛选过滤</div>
                    <div class="fontclass">#icon-filter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tel"></use>
                    </svg>
                    <div class="name">电话-线性圆框</div>
                    <div class="fontclass">#icon-tel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more"></use>
                    </svg>
                    <div class="name">更多-横向</div>
                    <div class="fontclass">#icon-more</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sound-fill"></use>
                    </svg>
                    <div class="name">麦克风</div>
                    <div class="fontclass">#icon-sound-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-phone</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rel-fill"></use>
                    </svg>
                    <div class="name">电话-圆框</div>
                    <div class="fontclass">#icon-rel-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sound"></use>
                    </svg>
                    <div class="name">麦克风-线性</div>
                    <div class="fontclass">#icon-sound</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more-col"></use>
                    </svg>
                    <div class="name">更多-竖向</div>
                    <div class="fontclass">#icon-more-col</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time-fill"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#icon-time-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-time"></use>
                    </svg>
                    <div class="name">时间-线性</div>
                    <div class="fontclass">#icon-time</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">财务</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money1"></use>
                    </svg>
                    <div class="name">财务-线性</div>
                    <div class="fontclass">#icon-money1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-safe-fill"></use>
                    </svg>
                    <div class="name">安全、保障</div>
                    <div class="fontclass">#icon-safe-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-safe"></use>
                    </svg>
                    <div class="name">安全、保障-线性</div>
                    <div class="fontclass">#icon-safe</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-photo-fill"></use>
                    </svg>
                    <div class="name">拍照</div>
                    <div class="fontclass">#icon-photo-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-photo"></use>
                    </svg>
                    <div class="name">拍照-线性</div>
                    <div class="fontclass">#icon-photo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-date"></use>
                    </svg>
                    <div class="name">日历</div>
                    <div class="fontclass">#icon-date</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Scan"></use>
                    </svg>
                    <div class="name">扫描</div>
                    <div class="fontclass">#icon-Scan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-menu"></use>
                    </svg>
                    <div class="name">列表视图、菜单</div>
                    <div class="fontclass">#icon-menu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                    <div class="name">宫格视图</div>
                    <div class="fontclass">#icon-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-data-fill"></use>
                    </svg>
                    <div class="name">用户资料</div>
                    <div class="fontclass">#icon-data-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-data"></use>
                    </svg>
                    <div class="name">用户资料-线性</div>
                    <div class="fontclass">#icon-data</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unlock"></use>
                    </svg>
                    <div class="name">解锁</div>
                    <div class="fontclass">#icon-unlock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock"></use>
                    </svg>
                    <div class="name">锁定</div>
                    <div class="fontclass">#icon-lock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-show"></use>
                    </svg>
                    <div class="name">显示、可见</div>
                    <div class="fontclass">#icon-show</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hide"></use>
                    </svg>
                    <div class="name">隐藏、不可见</div>
                    <div class="fontclass">#icon-hide</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-share</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-share-fill"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-share-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like-fill"></use>
                    </svg>
                    <div class="name">喜欢收藏</div>
                    <div class="fontclass">#icon-like-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-like"></use>
                    </svg>
                    <div class="name">收藏喜欢</div>
                    <div class="fontclass">#icon-like</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-label"></use>
                    </svg>
                    <div class="name">label</div>
                    <div class="fontclass">#icon-label</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-label-fill"></use>
                    </svg>
                    <div class="name">label</div>
                    <div class="fontclass">#icon-label-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guide-fill"></use>
                    </svg>
                    <div class="name">指南指导</div>
                    <div class="fontclass">#icon-guide-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guide"></use>
                    </svg>
                    <div class="name">指南指导</div>
                    <div class="fontclass">#icon-guide</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-place-fill"></use>
                    </svg>
                    <div class="name">位置</div>
                    <div class="fontclass">#icon-place-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-place"></use>
                    </svg>
                    <div class="name">位置-线性</div>
                    <div class="fontclass">#icon-place</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-upload"></use>
                    </svg>
                    <div class="name">上传导出</div>
                    <div class="fontclass">#icon-upload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download"></use>
                    </svg>
                    <div class="name">下载导入</div>
                    <div class="fontclass">#icon-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pc"></use>
                    </svg>
                    <div class="name">PC台式机</div>
                    <div class="fontclass">#icon-pc</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mobile"></use>
                    </svg>
                    <div class="name">Phone手机</div>
                    <div class="fontclass">#icon-mobile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clock"></use>
                    </svg>
                    <div class="name">闹钟</div>
                    <div class="fontclass">#icon-clock</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-code"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-code</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daohang"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-daohang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock-fill"></use>
                    </svg>
                    <div class="name">锁定</div>
                    <div class="fontclass">#icon-lock-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lock1"></use>
                    </svg>
                    <div class="name">锁定</div>
                    <div class="fontclass">#icon-lock1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-address"></use>
                    </svg>
                    <div class="name">address</div>
                    <div class="fontclass">#icon-address</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-active"></use>
                    </svg>
                    <div class="name">右下角勾选</div>
                    <div class="fontclass">#icon-active</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-undo"></use>
                    </svg>
                    <div class="name">undo</div>
                    <div class="fontclass">#icon-undo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-praise"></use>
                    </svg>
                    <div class="name">好评</div>
                    <div class="fontclass">#icon-praise</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad"></use>
                    </svg>
                    <div class="name">差评</div>
                    <div class="fontclass">#icon-bad</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-praise-circle"></use>
                    </svg>
                    <div class="name">好评-圆框</div>
                    <div class="fontclass">#icon-praise-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad-circle"></use>
                    </svg>
                    <div class="name">差评-圆框</div>
                    <div class="fontclass">#icon-bad-circle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiban"></use>
                    </svg>
                    <div class="name">一般</div>
                    <div class="fontclass">#icon-yiban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bumanyi"></use>
                    </svg>
                    <div class="name">不满意</div>
                    <div class="fontclass">#icon-bumanyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-manyi"></use>
                    </svg>
                    <div class="name">满意</div>
                    <div class="fontclass">#icon-manyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart"></use>
                    </svg>
                    <div class="name">报表-线性</div>
                    <div class="fontclass">#icon-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-fill"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-chart-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-pie"></use>
                    </svg>
                    <div class="name">饼图-线性</div>
                    <div class="fontclass">#icon-chart-pie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-pie-fill"></use>
                    </svg>
                    <div class="name">饼图</div>
                    <div class="fontclass">#icon-chart-pie-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-block"></use>
                    </svg>
                    <div class="name">条形图-线性</div>
                    <div class="fontclass">#icon-chart-block</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-block-fill"></use>
                    </svg>
                    <div class="name">条形图</div>
                    <div class="fontclass">#icon-chart-block-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-line"></use>
                    </svg>
                    <div class="name">折线图-线性</div>
                    <div class="fontclass">#icon-chart-line</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart-line-fill"></use>
                    </svg>
                    <div class="name">折线图</div>
                    <div class="fontclass">#icon-chart-line-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star-half"></use>
                    </svg>
                    <div class="name">半颗星</div>
                    <div class="fontclass">#icon-star-half</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">星星</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star-fill"></use>
                    </svg>
                    <div class="name">星星</div>
                    <div class="fontclass">#icon-star-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cloud"></use>
                    </svg>
                    <div class="name">cloud</div>
                    <div class="fontclass">#icon-cloud</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cloud-fill"></use>
                    </svg>
                    <div class="name">cloud-fill</div>
                    <div class="fontclass">#icon-cloud-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vip"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-vip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hot"></use>
                    </svg>
                    <div class="name">热销</div>
                    <div class="fontclass">#icon-hot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-new"></use>
                    </svg>
                    <div class="name">新</div>
                    <div class="fontclass">#icon-new</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gift"></use>
                    </svg>
                    <div class="name">礼物</div>
                    <div class="fontclass">#icon-gift</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-coupon"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="fontclass">#icon-coupon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zh"></use>
                    </svg>
                    <div class="name">中文模式</div>
                    <div class="fontclass">#icon-zh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-en"></use>
                    </svg>
                    <div class="name">英文模式</div>
                    <div class="fontclass">#icon-en</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rmb"></use>
                    </svg>
                    <div class="name">我的资产</div>
                    <div class="fontclass">#icon-rmb</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-document-fill"></use>
                    </svg>
                    <div class="name">document</div>
                    <div class="fontclass">#icon-document-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-document"></use>
                    </svg>
                    <div class="name">document</div>
                    <div class="fontclass">#icon-document</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit-fill"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-edit-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pencil-fill"></use>
                    </svg>
                    <div class="name">pencil</div>
                    <div class="fontclass">#icon-pencil-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pencil"></use>
                    </svg>
                    <div class="name">pencil</div>
                    <div class="fontclass">#icon-pencil</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit-new"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-edit-new</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-del-fill"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-del-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-del"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-del</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-save-fill"></use>
                    </svg>
                    <div class="name">保存</div>
                    <div class="fontclass">#icon-save-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-save"></use>
                    </svg>
                    <div class="name">保存-线性</div>
                    <div class="fontclass">#icon-save</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user1"></use>
                    </svg>
                    <div class="name">用户名</div>
                    <div class="fontclass">#icon-user1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user-fill1"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-user-fill1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pwd-fill"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-pwd-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pwd"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-pwd</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-code-fill"></use>
                    </svg>
                    <div class="name">验证码</div>
                    <div class="fontclass">#icon-code-fill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-code1"></use>
                    </svg>
                    <div class="name">验证码</div>
                    <div class="fontclass">#icon-code1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-phone1"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-phone1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengque"></use>
                    </svg>
                    <div class="name">天猫提示-正确</div>
                    <div class="fontclass">#icon-zhengque</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arw-top"></use>
                    </svg>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">#icon-arw-top</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arw-down"></use>
                    </svg>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">#icon-arw-down</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arw-left"></use>
                    </svg>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">#icon-arw-left</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangzuo"></use>
                    </svg>
                    <div class="name">向右</div>
                    <div class="fontclass">#icon-xiangzuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jikediancanicon13"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jikediancanicon13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jikediancanicon131"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jikediancanicon131</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sort-up"></use>
                    </svg>
                    <div class="name">排序</div>
                    <div class="fontclass">#icon-sort-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-start"></use>
                    </svg>
                    <div class="name">发</div>
                    <div class="fontclass">#icon-start</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-end"></use>
                    </svg>
                    <div class="name">到</div>
                    <div class="fontclass">#icon-end</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-monitor"></use>
                    </svg>
                    <div class="name">index</div>
                    <div class="fontclass">#icon-monitor</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yw"></use>
                    </svg>
                    <div class="name">yw</div>
                    <div class="fontclass">#icon-yw</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-aq"></use>
                    </svg>
                    <div class="name">aq</div>
                    <div class="fontclass">#icon-aq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-link"></use>
                    </svg>
                    <div class="name">link</div>
                    <div class="fontclass">#icon-link</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-layout"></use>
                    </svg>
                    <div class="name">layout</div>
                    <div class="fontclass">#icon-layout</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenzu"></use>
                    </svg>
                    <div class="name">分组</div>
                    <div class="fontclass">#icon-fenzu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chevron-down1"></use>
                    </svg>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">#icon-chevron-down1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diyiye"></use>
                    </svg>
                    <div class="name">第一页</div>
                    <div class="fontclass">#icon-diyiye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrLeft-fill"></use>
                    </svg>
                    <div class="name">三角下标（正方形）</div>
                    <div class="fontclass">#icon-arrLeft-fill</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
